<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>intel</title>
  <link rel="icon" href="img/favicon.ico"/>

  <link rel="stylesheet" href="css/index.css"/>

  <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<!--导航条开始-->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><span id="logo"></span></a>
      <a class="navbar-toggle" data-toggle="collapse" href="#caidan">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>
    <div id="caidan" class="collapse navbar-collapse">
      <ul class="nav navbar-nav ">
        <li class="dropdown caidan">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">英特尔产品</a></li>
            <li class="divider"></li>
            <li><a href="#">热点话题</a></li>
            <li class="divider"></li>
            <li><a href="#">用户</a></li>
            <li class="divider"></li>
            <li><a href="#">购买</a></li>
            <li class="divider"></li>
            <li><a href="#">产品支持</a></li>
            <li class="divider"></li>
            <li><a href="#">关于英特尔</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">china（简体中文）</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">登录</a>

          <div class="dropdown-menu">
            <h2>登录</h2>

            <p>您是否在英特尔工作？</p>

            <form action="#">
              <div class="form-group">
                <input class="form-control" type="text" placeholder="用户名">
              </div>
              <div class="form-group">
                <input class="form-control" type="password" placeholder="密码">
              </div>
            </form>
            <p>您登录表明您同意我们的服务条款</p>
            <a class="btn btn-info" href="#">登录</a>
          </div>
        </li>
      </ul>
      <form class="navbar-form navbar-right" action="#">
        <div class="form-group has-feedback">
          <label class="control-label" for="search">查找内容&nbsp;|&nbsp;</label>
          <input class="form-control" id="search" type="text" placeholder="搜索"/>
          <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
      </form>
    </div>
  </div>
</div>
<!--导航条结束-->

<!--主体部分开始-->
<div class="main">
  <div class="container">
    <h1>欢迎来到英特尔®</h1>

    <div class="row">
      <div class="col-xs-12 col-md-8 b-m">
        <img class="img-responsive div-shadow" src="img/intel.web.864.486.1.jpg" alt=""/>
        <div class="top-text">
          <h1>五代酷睿芯，强劲创体验</h1>
          <p>第五代智能英特尔®酷睿 处理器</p>
          <a class="btn btn-primary btn-sm" href="#">立即探索第五代智能英特尔®酷睿 处理器</a>
        </div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-12 b-m">
            <div class="top-flow-div div-shadow">
              <img class="img-responsive" src="img/intel.web.368.207.1.jpg" style="width: 100%">
              <div class="top-flow">
                <h4>解密二合一电脑</h4>
                <br><br>
                <p>打在英特尔处理器的二合一电脑，性能优越，给你带来更好的游戏体验！</p>
                <a href="#">了解更多</a>
              </div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-12 b-m">
            <div class="media sm-div div-shadow">
              <div class="media-left media-middle">
                <a href="#">
                  <img class="media-object" src="img/intel.web.81.108.png" alt=""/>
                </a>
              </div>
              <div class="shuxian media-body">
                <ul class="list-unstyled">
                  <li>英特尔®酷睿 M处理器</li>
                  <li>神奇的实感技术</li>
                  <li>英特尔®凌动 M处理器</li>
                  <li>2015 台北国际电脑展</li>
                  <li>《风暴英雄》游戏道具兑换</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-md-8 col-md-push-4 b-m">
        <img class="img-responsive div-shadow" src="img/intel.web.864.486.2.jpg">
        <div class="top-text">
          <h1>五代酷睿芯，强劲创体验</h1>
          <p>第五代智能英特尔®酷睿 处理器</p>
          <a class="btn btn-primary btn-xs" href="#">立即探索第五代智能英特尔®酷睿 处理器</a>
        </div>
      </div>
      <div class="col-xs-12 col-md-4 col-md-pull-8">
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-12 b-m">
            <div class="media sm-div div-shadow">
              <div class="media-left media-middle">
                <a href="#">
                  <img class="media-object" src="img/intel.web.81.108.png">
                </a>
              </div>
              <div class="shuxian media-body">
                <ul class="list-unstyled">
                  <li>英特尔®酷睿 M处理器</li>
                  <li>神奇的实感技术</li>
                  <li>英特尔®凌动 M处理器</li>
                  <li>2015 外被国际电脑展</li>
                  <li>《风暴英雄》游戏道具兑换</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-12 b-m">
            <div class="top-flow-div div-shadow">
              <img class="img-responsive" src="img/intel.web.368.207.2.jpg" style="width: 100%">
              <div class="top-flow">
                <h4>订阅英特尔精选资源</h4>
                <br><br>
                <p>打在英特尔处理器的二合一电脑，性能优越，给你带来更好的游戏体验！</p>
                <a href="#">了解更多</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-md-8 b-m">
        <img class="img-responsive div-shadow" src="img/intel.web.864.486.3.jpg" alt=""/>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-12 b-m">
            <div class="top-flow-div div-shadow">
              <img class="img-responsive" src="img/intel.web.368.207.3.jpg" style="width: 100%">
              <div class="top-flow">
                <h4>英特尔产品中心</h4>
                <br><br>
                <p>打在英特尔处理器的二合一电脑，性能优越，给你带来更好的游戏体验！</p>
                <a href="#">了解更多</a>
              </div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-12 b-m">
            <div class="media sm-div div-shadow">
              <div class="media-left media-middle">
                <a href="#">
                  <img class="media-object" src="img/intel.web.81.108.png" alt=""/>
                </a>
              </div>
              <div class="shuxian media-body">
                <ul class="list-unstyled">
                  <li>英特尔®酷睿 M处理器</li>
                  <li>神奇的实感技术</li>
                  <li>英特尔®凌动 M处理器</li>
                  <li>2015 外被国际电脑展</li>
                  <li>《风暴英雄》游戏道具兑换</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<!--主体部分结束-->

<!--版权开始-->
<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="row">
          <div class="col-xs-6">
          <ul class="list-unstyled">
            <li class="list-head">关于英特尔</li>
            <li><a href="#">公司信息</a></li>
            <li><a href="#">投资者关系</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">新闻发布室</a></li>
            <li><a href="#">网站地图</a></li>
            <li><a href="#">工作</a></li>
          </ul>
        </div>
          <div class="col-xs-6">
          <ul class="list-unstyled">
            <li class="list-head">支持</li>
            <li><a href="#">支持主页</a></li>
            <li><a href="#">下载中心</a></li>
            <li><a href="#">产品规范（ARK）</a></li>
            <li><a href="#">保修支持</a></li>
          </ul>
        </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="row">
          <div class="col-xs-6">
        <ul class="list-unstyled">
          <li class="list-head">法律声明</li>
          <li><a href="#">使用条款</a></li>
          <li><a href="#">商标</a></li>
          <li><a href="#">隐私条款</a></li>
          <li><a href="#">cookie</a></li>
        </ul>
      </div>
          <div class="col-xs-6">
        <ul class="list-unstyled">
          <li class="list-head">社交</li>
          <li class="sq"><a href="#">英特尔社区</a></li>
          <li class="sj"><a href="#">英特尔中国微博</a></li>
          <li class="sj"><a href="#">英特尔芯品汇微博</a></li>
          <li class="sj"><a href="#">英特尔商用频道微博</a></li>
        </ul>
      </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="banquan col-xs-12"><img src="img/logo.png" alt=""/>&nbsp;&nbsp;&nbsp;©英特尔公司 京ICP备 14036123号-2</div>
    </div>
  </div>
</div>
<!--版权结束-->

<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
  $(".top-flow").hover(
          function () {
            $(this).animate({top:"0%"},500);
            console.log(1);
          },
          function () {
            $(this).animate({top:"75%"},500);
            console.log(2);
          }
  );
</script>
</body>
</html>